<template>
    <Navbar/>
    <div>
      <el-card>
        <el-page-header content="欠费列表" icon="" title="物业费用缴费" />
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="propname" label="名字" width="180" />
          <!-- <el-table-column prop="propnumber" label="电话" width="180" />
          <el-table-column prop="propemail" label="邮箱" width="180" /> -->
          <el-table-column prop="building" label="楼号" />
          <el-table-column prop="roomnumber" label="房号" />
          <el-table-column prop="tmoney" label="总金额" />
          <!-- <el-table-column prop="editTime" label="收费时间" width="180" /> -->
          <el-table-column label="收费时间" width="180">
            <template #default="scope">
              {{ formatTime.gettime(scope.row.editTime) }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="ispay" label="是否缴费" width="180" /> -->
  
          <el-table-column label="是否缴费">
            <template #default="scope">
              <el-tag v-if="scope.row.ispay === 0" class="ml-2" type="danger">未缴费</el-tag>
              <el-tag v-else class="ml-2" type="success">以缴费</el-tag>
            </template>
          </el-table-column>
  
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="goPayment(scope.row)">
                <!--scope.row当前这个对象-->
                支付
              </el-button>
  
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
    </div>
  </template>
  
  <script setup>
  import Navbar from '@/components/Navbar'
  import { ref, onMounted, reactive } from "vue";
  import axios from "axios";
  import formatTime from "@/util/formatTime.js";
  import { useStore } from 'vuex';

  const store = useStore()
  const tableData = ref([]);

  onMounted(() => {
    getTableData();
    lookrate();
  });
  //显示页面数据
  const getTableData = async () => { 
    const building = store.state.webuserInfo.building
    const roomnumber = store.state.webuserInfo.roomnumber
    const temdata = building+roomnumber
    const res = await axios.get(`/webapi/rate/list/${temdata}`);
    tableData.value = res.data.data;
  };
  

  //发起支付宝支付请求
  const goPayment = async(cldata)=>{ 
    const building = store.state.webuserInfo.building
    const roomnumber = store.state.webuserInfo.roomnumber
    const housenumber = building+roomnumber
    //console.log(cldata)
    const contentdata = {
            orderId:cldata._id,
            //orderId:5,
            price:cldata.tmoney,
            name:cldata.propname,
            housenumber:housenumber
        }
    store.commit("changewebpaystate",contentdata)
    console.log(store.state.webpaystate.name)
    const data = JSON.stringify(contentdata)
    const res = await axios.post(`/webapi/rate/payment/${data}`);
    window.location.href=res.data.data  //跳转支付宝页面
    console.log(res.data.data2)
    store.commit("changewebpaystate",{url:res.data.data2})
    
    
    //const res2 = await axios.post(`/webapi/rate/paymentlookrate/${data}`);
    //console.log(res2.data)
    //const res2 = await axios.post(res.data.data2);
    //console.log(res2.data.alipay_trade_query_response.trade_status)

  }
  //查看返回的状态 是成功付款的修改数据   做了个持久化的处理 判断是否存在并且是这个账户的数据才能进行修改
  const lookrate = async () => { 
    console.log(store.state.webpaystate.url)
    //console.log(store.state.webuserInfo.username)
    const building = store.state.webuserInfo.building
    const roomnumber = store.state.webuserInfo.roomnumber
    const housenumber = building+roomnumber
    //console.log("条件一:",store.state.webpaystate)
    //console.log("条件2.1:",store.state.webpaystate.housenumber)
    //console.log("条件2.2:",housenumber)
    if(store.state.webpaystate.url && store.state.webpaystate.housenumber===housenumber){
        console.log("我进来了")
        const res2 = await axios.post(store.state.webpaystate.url);
        if(res2.data.alipay_trade_query_response.trade_status==="TRADE_SUCCESS"){
            //开始修改工作  然后删除永久存储防止下一次进来报错
            console.log("开始删除")
            const putId = store.state.webpaystate.orderId
            console.log(putId)
            const res = await axios.post(`/webapi/rate/changeispay/${putId}`);
            getTableData();
        }
    }
    else{
        console.log("mei进来")
    }
  }

  </script>
  
  <style lang="scss" scoped>
  .el-table {
    margin-top: 50px;
  }
  </style>
  